<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>灯控系统</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
	
	<%-- <script  src="${pageContext.request.contextPath}/js/jquery/jquery-3.1.1.min.js" type="text/javascript"></script> --%>
	<!-- <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script> -->
	<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
	
	<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.min.js"></script>
	<!-- bootstrap 引入 -->
	<script src="${pageContext.request.contextPath}/js/tether.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/popper.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
	<!-- 引入弹窗 layer -->
	<script src="${pageContext.request.contextPath}/js/layer/layer.js"></script>
	<script src="${pageContext.request.contextPath}/js/page/common.js"></script>
	<script src="${pageContext.request.contextPath}/js/echarts-all-3.js"></script>
	<script src="${pageContext.request.contextPath}/js/page/home.js"></script>
	
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

	<style type="text/css">
		body{margin:0;padding: 0;min-height: 768px;min-width: 1024px;}
		.topdiv{height: 52px;background-color: white;}
		.logodiv{height:52px;width: 200px;float: left; background-image:url("${pageContext.request.contextPath}/img/login/logo.png");background-position: 10% 30%;}
		.selectedcss{border-bottom-color: grey !important;}
		.menu{height:50px;cursor: pointer;float:left;}
		.menu div{height:50px;width:100px;float: left;  background-color:lightgreen; border-color: white;border-style: solid;border-width: 2px;}
		.menu div:HOVER{border-color: green;}
		.logininfo{height:52px;width:100px;float:right;background-color:lightgrey;}
		.content{margin-top:0px;border-top-color: black;border-top-style: solid;border-top-color: grey;}
	</style>
	
	<script type="text/javascript">
		function clickmenu(menuitem,srcStr) {
			$("#menudiv").children().each(function(i,dom) {
				$(dom).removeClass("selectedcss");
			});
			
			$(menuitem).addClass("selectedcss");
			
			$("#mainframe").attr("src",srcStr);
		}
	</script>
  </head>
  
  <body>
  		<div class="header">
		<div class="left header-logo"><img class="header-logo-img" src="images/header_logo.png" /></div>
		<div class="right header-nav">
			<a class="nav-link active" href="${pageContext.request.contextPath }/main.do">
				<i class="icon icon-home"></i>
				<span class="link-text">主页</span>
			</a>
			<c:if test="${menubean.menu1 }">
			<a class="nav-link" href="${pageContext.request.contextPath }/showDevice.do">
				<i class="icon icon-install"></i>
				<span class="link-text">安装</span>
			</a>
			</c:if>
			<c:if test="${menubean.menu2 }">
			<a class="nav-link" href="${pageContext.request.contextPath}/showConfig.do">
				<i class="icon icon-config"></i>
				<span class="link-text">配置</span>
			</a>
			</c:if>
			<c:if test="${menubean.menu3 }">
			<!-- <a class="nav-link" href="operation.html">
				<i class="icon icon-operation"></i>
				<span class="link-text">操作</span>
			</a> -->
			<a class="nav-link" href="${pageContext.request.contextPath}/data.do">
				<i class="icon icon-data"></i>
				<span class="link-text">数据</span>
			</a>
			</c:if>
			<%-- <c:if test="${menubean.menu4 }">
			<a class="nav-link" href="history.html">
				<i class="icon icon-history"></i>
				<span class="link-text">历史</span>
			</a>
			</c:if> --%>
			<c:if test="${menubean.menu4 }">
			<a class="nav-link" href="${pageContext.request.contextPath}/faultList.do">
				<i class="icon icon-malfunction"></i>
				<span class="link-text">故障</span>
			</a>
			</c:if>
			<c:if test="${menubean.menu5 }">
			<a class="nav-link" href="${pageContext.request.contextPath}/showUserList.do">
				<i class="icon icon-customer-management"></i>
				<span class="link-text">客户管理</span>
			</a>
			</c:if>
			<c:if test="${menubean.menu6 }">
			<a class="nav-link" href="${pageContext.request.contextPath}/statusList.do">
				<i class="icon icon-status"></i>
				<span class="link-text">状态</span>
			</a>
			</c:if>
			<c:if test="${menubean.menu7 }">
			<a class="nav-link" href="${pageContext.request.contextPath}/currentList.do">
				<i class="icon icon-malfunction"></i>
				<span class="link-text">电流</span>
			</a>
			</c:if>
			<a class="nav-link" href="${pageContext.request.contextPath}/logout.do">
				<i class="icon icon-out"></i>
				<span class="link-text">退出</span>
			</a>
			<div class="clear"></div>
		</div>
		<div class="clear"></div>
	</div>

	<div class="block20"></div>
	<div class="container-fluid">
		<div class="row">
			<div class="col-lg-7 col-md-12" id="homeArticle">
				<div class="bg-white home-map-box">
					<div class="home-map" id="homeMap">
						<div class="map-div" id="dituContent"></div>
					</div>
				</div>
			</div>
			<div class="col-lg-5 col-md-12" id="homeSide">
				<div class="padding20 bg-white">
				<div class="mui-panel blue-panel side-install">
					<div class="panel-title side-install-title">
						<span class="left left-title">安装</span>
						<span class="right right-title">状态</span>
						<div class="clear"></div>
					</div>
					<div class="panel-content side-install-cont">
						<div class="left isntall-left-content">
							<select class="select all-select" id="dtuselect" onchange="changeData()">
								<option value="0">所有</option>
								<c:forEach items="${dtuList }" var="dtu">
								<option value="${dtu.dtuId }">${dtu.panId }</option>
								</c:forEach>
							</select>
								<ul class="install-list">
									<li><i class="icon icon-concentrator"></i>集中器数量:<span id="dtucount">0</span></li>
									<li><i class="icon icon-lightpole"></i>路灯数量:<span id="lightcount">0</span></li>
									<li><i class="icon icon-potencial"></i>P在线数量:<span id="onlinecount">0</span></li>
									<li><i class="icon icon-fecha"></i>故障数量:<span id="faultcount">0</span></li>
							</ul>
						</div>
							<div class="right">
								<div id="chartHomeCount" class="chart-home-count"></div>
							</div>
							<div class="clear"></div>
						</div>
					</div>
					<div class="block15"></div>
					<div class="home-weather" id="homeWeather">
						<div class="weather-info left">
							<!-- <img src="images/weather_status_01.png" class="left"> -->
							<div class="left">
							<iframe style="width:300;height:60;" scrolling="no" frameborder="0" src="http://i.tianqi.com/index.php?c=code&id=12&icon=5&num=2">
							</iframe>
							<!-- 	<div class="info-text">多云</div>
								<div class="info-number">23 ~ 15℃</div> -->
							</div>
							<div class="clear"></div>
						</div>
						<span class="weather-date left">日期：<b>${nowdate}</b></span>
						<div class="clear"></div>
					</div>
					<div class="block15"></div>
					<div class="home-side-card side-card-green side-emission-reduction">
						<i class="icon icon-co2"></i>
						<p class="info info-space-row info-main-row">这些设备减少CO<font size="1">2</font>排放量</p>
						<p class="info info-space-row"><b class="important-number">${co2 }</b>gr.de CO<font size="1">2</font></p>
						<span class="prop-text">减排</span>
					</div>
					
					<div class="block15"></div>
					<div class="home-side-card side-card-orange side-energy-saving">
						<i class="icon icon-level"></i>
						<p class="info info-space-row info-main-row">CO<font size="1">2</font>减排量排名</p>
						<p class="info info-space-row" style="font-size:24px;">第<b class="important-number">${co2Order}</b>名</p>
						<span class="prop-text">排名</span>
					</div>

				</div>
			</div>
			<div class="clear"></div>
		</div>
	</div>
  </body>
  
  <script type="text/javascript">
  
  
    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMarker();//向地图中添加marker
    }
    
    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(119.423443,32.400921);//定义一个中心点坐标
        map.centerAndZoom(point,15);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }
    
    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }
    
    //地图控件添加函数：
    function addMapControl(){
	    //向地图中添加缩放控件
		var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
		map.addControl(ctrl_nav);
	    //向地图中添加缩略图控件
		var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
		map.addControl(ctrl_ove);
	    //向地图中添加比例尺控件
		var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
		map.addControl(ctrl_sca);
    }
    
    
  	//标注点数组
    /* var markerArr = [{state:1,title:"发大水",content:"发大水发大水",point:"118.8279|32.130317",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
    					{state:2,title:"11111111",content:"车牌号：<br>22222222211111111111111111111<br>1111111111111111111111111111",point:"118.8079|32.130317",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
		 ]; */
	var markerArr = eval(${locationJson});
    //创建marker
    function addMarker(){
        for(var i=0;i<markerArr.length;i++){
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0,p1);
            var iconImg = null;
            if(json.state==1) {
				iconImg = createIcon(json.icon);
            }else {
            	iconImg = createIcon1(json.icon);
            }
            var marker = new BMap.Marker(point,{icon:iconImg});
			var iw = createInfoWindow(i);
			var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
			marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                        borderColor:"#808080",
                        color:"#333",
                        cursor:"pointer"
            });
			
			(function(){
				var index = i;
				var _iw = createInfoWindow(i);
				var _marker = marker;
				_marker.addEventListener("click",function(){
				    this.openInfoWindow(_iw);
			    });
			    _iw.addEventListener("open",function(){
				    _marker.getLabel().hide();
			    });
			    _iw.addEventListener("close",function(){
				    _marker.getLabel().show();
			    });
				label.addEventListener("click",function(){
				    _marker.openInfoWindow(_iw);
			    });
				if(!!json.isOpen){
					label.hide();
					_marker.openInfoWindow(_iw);
				}
			})();
        }
    }
    //创建InfoWindow
    function createInfoWindow(i){
        var json = markerArr[i];
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
        return iw;
    }
    //创建一个Icon
    function createIcon(json){
        var icon = new BMap.Icon("http://www.365ctrl.com/img/map//light_gray.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)});
        return icon;
    }
    
    //创建一个Icon
    function createIcon1(json){
        var icon = new BMap.Icon("http://www.365ctrl.com/img/map/light_orange.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)});
        return icon;
    }
    
    $(document).ready(function() {
	    initMap();//创建和初始化地图
	    changeData();
    });
    
    function changeData() {
    	var dtuId = $("#dtuselect").val();
    	$.ajax({
			type : "POST",
			url : "${pageContext.request.contextPath }/queryCountData.do",
			async: false,
			dataType : "json",
			data : {
				dtuId : dtuId
			},
			success : function(data) {
				if(data.success==0) {
					$("#dtucount").text(data.dtucount);
					$("#lightcount").text(data.lightcount);
					$("#onlinecount").text(data.onlinecount);
					$("#faultcount").text(data.faultcount);
					
					showHomeEchart(data.onlinecount,data.faultcount);
				}
			}
		});
    }
</script>
</html>
